/* header line  */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

header{font-family: 'Poppins', sans-serif;}
    
#line, #hoverline{display:block;}
  #hoverline::after{content:'';
    display: block;
    height: 5px;
    width: 100%;
    transition: 1s;
    transform: scaleX(0);
    transform-origin:center;
    background-color: orange;
}
#line, #hoverline:hover::after{
transform: scaleX(1);
transform-origin:center;
}
/* header line End */

@import url(https://fonts.googleapis.com/css?family=Montserrat:500);



*::before,
*::after {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	background-color: #fafafa;
}


.gallery {
	display: flex;
	flex-wrap: wrap;
	/* Compensate for excess margin on outer gallery flex items */
	margin: -1rem -1rem;
}

.gallery-item {
	/* Minimum width of 24rem and grow to fit available space */
	flex: 1 0 24rem;
	/* Margin value should be half of grid-gap value as margins on flex items don't collapse */
	margin: 1rem;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

.gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
}

.gallery-image:hover {
	transform: scale(1.15);
}

/*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling. 

*/

@supports (display: grid) {
	.gallery {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
		grid-gap: 2rem;
	}

	.gallery,
	.gallery-item {
		margin: 0;
	}
}

/**
 * Demo Styles
 */

 html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}
/* img hover */


#kkc:hover{
    box-shadow: 5px 5px 10px rgba(0,0,0,.3),
    inset -4px -4px 10px rgba(0,0,0,.8);
    transition:.1s;
}


/* footer icon effect */

/* instagram */
#kkl {
	color:white;
  }
  #kkl:hover{
	color:rgb(156, 88, 169);
  }
  
  /* facebook */
  #llk{
	color:white;
  }
  
  #llk:hover{
	color:cornflowerblue;
  }
  
  /* twitter  */
  #jjk{
	color:white;
  }
  
  #jjk:hover{
	color:cornflowerblue;
  }
  
  /* youtube */
  #okkk{
	color:white;
  }
  
  #okkk:hover{
	color:rgb(215, 17, 57);
  }
  
  /* linkedin */
  #llk{
	color:white;
  }
  
  #llk:hover{
	color:deepskyblue;
  }
  /* footer icon  End */